<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas></canvas>
    <script>
        let a = 200,
            b = 100,
            radius = 30;
        time = 0;
        let cv = document.querySelector('canvas')
        cv.height = 768;
        cv.width = 1024;
        if (cv.getContext) {
            let c = cv.getContext('2d')
            drawCenterPoint(c);
            route(c, 300, 300, a, b)
            let f = () => {
                arcRoute(c, 300, 300, a, b, radius)
                requestAnimationFrame(f)
            }
            f()
        }
        //绘制圆点
        function drawCenterPoint(c) {
            c.beginPath();
            c.fillStyle = 'pink';
            c.arc(300, 300, 5, 0, 2 * Math.PI)
            c.closePath()
            c.fill()
        }
        // 绘制椭圆
        function route(c, x, y, a, b) {
            let step = (a > b) ? 1 / a : 1 / b;
            c.beginPath();
            // c.strokeStyle = 'red'
            c.moveTo(x + a, y);
            for (let i = 0; i < 2 * Math.PI; i += step) {
                c.lineTo(x + a * Math.cos(i), y + b * Math.sin(i))
            }
            c.closePath()
            c.stroke()
        }
        // 小球在椭圆上运动
        function arcRoute(c, x, y, a, b, r) {
            c.clearRect(0, 0, 1024, 768)
            route(c, x, y, a, b);
            drawCenterPoint(c);
            let step = (a > b) ? 1 / a : 1 / b;
            // let step = 1
            
            if (time == 0) {
                c.beginPath();
                // c.fillStyle = 'red'
                c.arc(x, y, r, 0, 2 * Math.PI);
                c.closePath()
                c.fill()
            } else {
                c.beginPath();
                // c.fillStyle = 'red'
                //time为小球运动速度，值越大，运动越快
                c.arc(x + a * Math.cos(time), y + b * Math.sin(time), 15, 0, 2 * Math.PI)
               
                // c.closePath()
                c.stroke()

            }
            time += .1;

        }
    </script>
</body>

</html>